[V0_FILE]typescriptreact:file="app/page.tsx" import Hero from "@/components/hero" import FeaturesSection from "@/components/features-section" import TradingViewSection from "@/components/trading-view-section" import ProfitCalculator from "@/components/profit-calculator" import LeaderboardSection from "@/components/leaderboard-section" import AiInsightsSection from "@/components/ai-insights-section" import FaqSection from "@/components/faq-section" import CtaSection from "@/components/cta-section" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="lib/utils.ts" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="components/ui/button.tsx" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/card.tsx" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef>(({ className, ...props }, ref) => (

)) Card.displayName = "Card" const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>
, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="components/ui/slider.tsx" "use client" import * as React from "react" import * as SliderPrimitive from "@radix-ui/react-slider" import { cn } from "@/lib/utils" const Slider = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Slider.displayName = SliderPrimitive.Root.displayName export { Slider } [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" "use client" import * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" import { cn } from "@/lib/utils" const Tabs = TabsPrimitive.Root const TabsList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsList.displayName = TabsPrimitive.List.displayName const TabsTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsTrigger.displayName = TabsPrimitive.Trigger.displayName const TabsContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsContent.displayName = TabsPrimitive.Content.displayName export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return
} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/input.tsx" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="components/ui/accordion.tsx" "use client" import * as React from "react" import * as AccordionPrimitive from "@radix-ui/react-accordion" import { ChevronDown } from "lucide-react" import { cn } from "@/lib/utils" const Accordion = AccordionPrimitive.Root const AccordionItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AccordionItem.displayName = "AccordionItem" const AccordionTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( svg]:rotate-180", className, )} {...props} > {children} )) AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName const AccordionContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => (
{children}
)) AccordionContent.displayName = AccordionPrimitive.Content.displayName export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } [V0_FILE]typescriptreact:file="app/globals.css" isFixed="true" isQuickEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 220 33% 98%; --foreground: 220 40% 10%; --primary: 220 90% 50%; --primary-foreground: 0 0% 100%; --secondary: 220 20% 92%; --secondary-foreground: 220 40% 10%; --muted: 220 20% 94%; --muted-foreground: 220 10% 40%; --accent: 220 90% 50%; --accent-foreground: 0 0% 100%; --card: 0 0% 100%; --card-foreground: 220 40% 10%; --border: 220 20% 90%; --input: 220 20% 90%; --radius: 0.5rem; } .dark { --background: 220 40% 10%; --foreground: 220 20% 98%; --primary: 220 90% 50%; --primary-foreground: 0 0% 100%; --secondary: 220 30% 16%; --secondary-foreground: 220 20% 98%; --muted: 220 30% 16%; --muted-foreground: 220 20% 70%; --accent: 220 90% 50%; --accent-foreground: 0 0% 100%; --card: 220 40% 13%; --card-foreground: 220 20% 98%; --border: 220 30% 18%; --input: 220 30% 18%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; font-feature-settings: "rlig" 1, "calt" 1; } } .grid-pattern { background-image: linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px); background-size: 20px 20px; } .dark .grid-pattern { background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 20px 20px; } .animate-float { animation: float 6s ease-in-out infinite; } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .animate-pulse-slow { animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import Navbar from "@/components/navbar" import Footer from "@/components/footer" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "ForexFundTrader | Advanced Prop Trading Platform", description: "Elevate your trading with ForexFundTrader's advanced prop trading platform. Access top-tier funding, real-time analytics, and a community of elite traders.", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/navbar.tsx" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { Menu, X, ChevronDown } from "lucide-react" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" import { ModeToggle } from "@/components/mode-toggle" const navLinks = [ { name: "Home", href: "/" }, { name: "About", href: "/about" }, { name: "Trading Programs", href: "#", dropdown: [ { name: "Beginner Program", href: "/programs/beginner" }, { name: "Advanced Program", href: "/programs/advanced" }, { name: "Elite Program", href: "/programs/elite" }, ], }, { name: "Education", href: "/education" }, { name: "Leaderboard", href: "/leaderboard" }, { name: "FAQ", href: "/faq" }, { name: "Contact", href: "/contact" }, ] export default function Navbar() { const [isOpen, setIsOpen] = useState(false) const [scrolled, setScrolled] = useState(false) const [openDropdown, setOpenDropdown] = useState(null) useEffect(() => { const handleScroll = () => { if (window.scrollY > 10) { setScrolled(true) } else { setScrolled(false) } } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const toggleDropdown = (name: string) => { if (openDropdown === name) { setOpenDropdown(null) } else { setOpenDropdown(name) } } return (

ForexFundTrader

{navLinks.map((link) => (
{link.dropdown ? ( ) : ( {link.name} )} {link.dropdown && (

{link.dropdown.map((item) => ( {item.name} ))}

)}
))}

{/* Mobile menu /}

{navLinks.map((link) => (
{link.dropdown ? ( <> {openDropdown === link.name && (
{link.dropdown.map((item) => ( setIsOpen(false)} > {item.name} ))}
)} ) : ( setIsOpen(false)} > {link.name} )}
))}

) } [V0_FILE]typescriptreact:file="components/mode-toggle.tsx" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ModeToggle() { const { setTheme } = useTheme() return ( setTheme("light")}>Light setTheme("dark")}>Dark setTheme("system")}>System ) } [V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx" "use client" import as React from "react" import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" import { Check, ChevronRight, Circle } from "lucide-react" import { cn } from "@/lib/utils" const DropdownMenu = DropdownMenuPrimitive.Root const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger const DropdownMenuGroup = DropdownMenuPrimitive.Group const DropdownMenuPortal = DropdownMenuPrimitive.Portal const DropdownMenuSub = DropdownMenuPrimitive.Sub const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup const DropdownMenuSubTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, children, ...props }, ref) => ( {children} )) DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName const DropdownMenuSubContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName const DropdownMenuContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, sideOffset = 4, ...props }, ref) => ( )) DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName const DropdownMenuItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, ...props }, ref) => ( )) DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName const DropdownMenuCheckboxItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, checked, ...props }, ref) => ( {children} )) DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName const DropdownMenuRadioItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName const DropdownMenuLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, ...props }, ref) => ( )) DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName const DropdownMenuSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes) => { return } DropdownMenuShortcut.displayName = "DropdownMenuShortcut" export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, } [V0_FILE]typescriptreact:file="components/hero.tsx" "use client" import { Button } from "@/components/ui/button" import { ArrowRight } from "lucide-react" export default function Hero() { return (
{/* Background grid pattern /}
{/ Content /}

Elevate Your Trading with Professional Capital

Access elite prop firm funding, advanced analytics, and join a community of successful traders.

{/ Stats /}
{[ { value: "$12M+", label: "Trader Payouts" }, { value: "8,500+", label: "Funded Traders" }, { value: "24/7", label: "Market Access" }, { value: "15+", label: "Prop Firms" }, ].map((stat, i) => (

{stat.value}

{stat.label}

))}

{/ Scroll indicator /}

Scroll to explore

) } [V0_FILE]typescriptreact:file="components/features-section.tsx" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { BarChartIcon as ChartBar, BarChart3, TrendingUp, Award, Users, Zap, Brain, LineChart } from "lucide-react" const features = [ { icon: , title: "Advanced Trading Tools", description: "Access professional-grade charting, indicators, and analysis tools to make informed trading decisions.", }, { icon: , title: "Real-time Market Data", description: "Stay ahead with real-time forex market data, economic calendars, and news feeds integrated directly into your dashboard.", }, { icon: , title: "Performance Analytics", description: "Track your trading performance with detailed metrics, statistics, and visual reports to optimize your strategy.", }, { icon: , title: "Competitive Challenges", description: "Participate in trading challenges to earn funding and showcase your skills on our global leaderboard.", }, { icon: , title: "Trader Community", description: "Connect with fellow traders, share insights, and learn from the best in our exclusive trading community.", }, { icon: , title: "Instant Execution", description: "Experience lightning-fast trade execution with our optimized trading infrastructure and low-latency connections.", }, { icon: , title: "AI-Powered Insights", description: "Leverage artificial intelligence to identify patterns, predict market movements, and enhance your trading strategy.", }, { icon: , title: "Risk Management", description: "Implement robust risk management with customizable stop-loss, take-profit, and position sizing tools.", }, ] export default function FeaturesSection() { return (

Cutting-Edge Features

Our platform combines advanced technology with professional trading tools to give you the edge in the forex market.

{features.map((feature, i) => (
{feature.icon}
{feature.title} {feature.description} ))}

) } [V0_FILE]typescriptreact:file="components/trading-view-section.tsx" "use client" import { useEffect, useRef, useState } from "react" import { Card, CardContent } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" declare global { interface Window { TradingView: any } } export default function TradingViewSection() { const containerRef = useRef(null) const [isLoaded, setIsLoaded] = useState(false) useEffect(() => { // Load TradingView widget script const script = document.createElement("script") script.src = "https://s3.tradingview.com/tv.js" script.async = true script.onload = () => setIsLoaded(true) document.body.appendChild(script) return () => { document.body.removeChild(script) } }, []) useEffect(() => { if (isLoaded && containerRef.current) { new window.TradingView.widget({ autosize: true, symbol: "FX:EURUSD", interval: "D", timezone: "Etc/UTC", theme: "dark", style: "1", locale: "en", toolbar_bg: "#131722", enable_publishing: false, hide_top_toolbar: false, hide_legend: false, save_image: false, container_id: "tradingview_widget", }) } }, [isLoaded]) return (

Live Market Analysis

Track real-time market movements with professional-grade charting tools and technical analysis.

EUR/USD GBP/USD USD/JPY XAU/USD

Loading GBP/USD chart...

Loading USD/JPY chart...

Loading XAU/USD chart...

) } [V0_FILE]typescriptreact:file="components/profit-calculator.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Slider } from "@/components/ui/slider" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Calculator, DollarSign, Percent, TrendingUp } from "lucide-react" import { ChartContainer, ChartTooltip, ChartTooltipContent, Line, LineChart, XAxis, YAxis } from "@/components/ui/chart" const propFirmPrograms = [ { name: "Standard", initialBalance: 10000, maxDrawdown: 5, profitTarget: 8, profitSplit: 70 }, { name: "Advanced", initialBalance: 25000, maxDrawdown: 8, profitTarget: 10, profitSplit: 75 }, { name: "Professional", initialBalance: 50000, maxDrawdown: 10, profitTarget: 12, profitSplit: 80 }, { name: "Elite", initialBalance: 100000, maxDrawdown: 12, profitTarget: 15, profitSplit: 85 }, ] export default function ProfitCalculator() { const [program, setProgram] = useState(propFirmPrograms[0]) const [riskPercentage, setRiskPercentage] = useState(1) const [winRate, setWinRate] = useState(60) const [riskRewardRatio, setRiskRewardRatio] = useState(2) const [tradesPerMonth, setTradesPerMonth] = useState(20) const [months, setMonths] = useState(3) const [projectedResults, setProjectedResults] = useState({ totalProfit: 0, traderPayout: 0, monthlyData: [] as { month: number; balance: number }[], }) useEffect(() => { calculateProjectedResults() }, [program]) // Only program is needed here const calculateProjectedResults = () => { let currentBalance = program.initialBalance const monthlyData = [{ month: 0, balance: currentBalance }] for (let month = 1; month <= months; month++) { const winningTrades = Math.floor(tradesPerMonth (winRate / 100)) const losingTrades = tradesPerMonth - winningTrades const riskPerTrade = currentBalance * (riskPercentage / 100) const rewardPerTrade = riskPerTrade * riskRewardRatio const monthlyProfit = winningTrades * rewardPerTrade - losingTrades * riskPerTrade currentBalance += monthlyProfit monthlyData.push({ month, balance: currentBalance }) } const totalProfit = currentBalance - program.initialBalance const traderPayout = totalProfit * (program.profitSplit / 100) setProjectedResults({ totalProfit, traderPayout, monthlyData, }) } return (
Profit Calculator
Estimate your potential earnings with our prop firm calculator {propFirmPrograms.map((p) => ( setProgram(p)}> {p.name} ))} {propFirmPrograms.map((p) => (

Initial Balance: ${p.initialBalance.toLocaleString()}

Max Drawdown: {p.maxDrawdown}%

Profit Target: {p.profitTarget}%

Profit Split: {p.profitSplit}%

))}

Risk Per Trade: {riskPercentage}% ${(program.initialBalance * (riskPercentage / 100)).toLocaleString()}
setRiskPercentage(value[0])} className="py-2" />

Win Rate: {winRate}%
setWinRate(value[0])} className="py-2" />

Risk/Reward Ratio: 1:{riskRewardRatio}
setRiskRewardRatio(value[0])} className="py-2" />

Trades Per Month: {tradesPerMonth}
setTradesPerMonth(value[0])} className="py-2" />

Months: {months}
setMonths(value[0])} className="py-2" />

Total Profit

${Math.round(projectedResults.totalProfit).toLocaleString()}

Your Payout ({program.profitSplit}%)

${Math.round(projectedResults.traderPayout).toLocaleString()}

`$${(value / 1000).toFixed(0)}k`} width={60} /> } />

) } function CustomTooltip({ active, payload }: any) { if (active && payload && payload.length) { return (
Month {payload[0].payload.month}

Balance: ${payload[0].value.toLocaleString()}
) } return null } [V0_FILE]typescriptreact:file="components/leaderboard-section.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Trophy, ArrowUp, ArrowDown } from "lucide-react" import { Badge } from "@/components/ui/badge" // Mock data for the leaderboard const leaderboardData = { weekly: [ { rank: 1, name: "Alex Thompson", profit: 12450, change: "up", country: "US", trades: 28 }, { rank: 2, name: "Sarah Chen", profit: 9870, change: "up", country: "SG", trades: 42 }, { rank: 3, name: "Michael Rodriguez", profit: 8320, change: "down", country: "ES", trades: 35 }, { rank: 4, name: "Emma Wilson", profit: 7650, change: "up", country: "UK", trades: 31 }, { rank: 5, name: "David Kim", profit: 6980, change: "up", country: "KR", trades: 26 }, ], monthly: [ { rank: 1, name: "James Peterson", profit: 38750, change: "up", country: "CA", trades: 87 }, { rank: 2, name: "Olivia Wang", profit: 32400, change: "up", country: "CN", trades: 103 }, { rank: 3, name: "Robert Johnson", profit: 29650, change: "up", country: "US", trades: 92 }, { rank: 4, name: "Sophia Martinez", profit: 26800, change: "down", country: "MX", trades: 78 }, { rank: 5, name: "Daniel Lee", profit: 24300, change: "up", country: "AU", trades: 84 }, ], allTime: [ { rank: 1, name: "Thomas Wright", profit: 287500, change: "up", country: "UK", trades: 642 }, { rank: 2, name: "Ava Nakamura", profit: 243600, change: "up", country: "JP", trades: 578 }, { rank: 3, name: "Christopher Davis", profit: 219300, change: "up", country: "US", trades: 531 }, { rank: 4, name: "Isabella Rossi", profit: 198700, change: "up", country: "IT", trades: 489 }, { rank: 5, name: "Mohammed Al-Farsi", profit: 176200, change: "down", country: "AE", trades: 512 }, ], } export default function LeaderboardSection() { const [period, setPeriod] = useState("weekly") return (
Top Traders
See who's leading the pack with the highest returns setPeriod("weekly")}> Weekly setPeriod("monthly")}> Monthly setPeriod("allTime")}> All Time {Object.entries(leaderboardData).map(([key, traders]) => (
{traders.map((trader, index) => (

{trader.rank}

{trader.name}

{trader.country} • {trader.trades} trades

${trader.profit.toLocaleString()}

{trader.change === "up" ? ( <> Rising ) : ( <> Falling )}

))}

View Full Leaderboard
))} ) } [V0_FILE]typescriptreact:file="components/ai-insights-section.tsx" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Brain, TrendingUp, TrendingDown, BarChart2, LineChart } from "lucide-react" import { Badge } from "@/components/ui/badge" // Mock AI insights data const insightsData = { marketTrends: [ { title: "EUR/USD Bullish Momentum", description: "Technical indicators suggest a strong bullish trend for EUR/USD in the coming week, with key resistance at 1.0950.", sentiment: "bullish", confidence: 78, timeframe: "1 week", }, { title: "GBP/USD Consolidation Phase", description: "GBP/USD is entering a consolidation phase after recent volatility. Range-bound trading expected between 1.2650-1.2750.", sentiment: "neutral", confidence: 65, timeframe: "3 days", }, { title: "USD/JPY Bearish Pressure", description: "Increasing bearish pressure on USD/JPY due to shifting BOJ policy expectations. Support level at 147.50 is critical.", sentiment: "bearish", confidence: 72, timeframe: "2 weeks", }, ], economicImpact: [ { title: "Fed Rate Decision Impact", description: "Upcoming Federal Reserve meeting expected to maintain rates, but hawkish tone could strengthen USD across major pairs.", sentiment: "bullish", confidence: 81, timeframe: "immediate", }, { title: "ECB Policy Outlook", description: "ECB's dovish stance likely to continue, potentially weakening EUR in medium-term despite recent strength.", sentiment: "bearish", confidence: 69, timeframe: "1 month", }, { title: "UK Inflation Data", description: "Lower-than-expected UK inflation could prompt BoE to ease policy sooner, creating GBP selling pressure.", sentiment: "bearish", confidence: 74, timeframe: "2 weeks", }, ], tradingOpportunities: [ { title: "Gold Breakout Potential", description: "XAU/USD forming a bullish flag pattern with potential breakout above $2,050, targeting $2,100 on risk aversion flows.", sentiment: "bullish", confidence: 76, timeframe: "1-2 weeks", }, { title: "AUD/USD Reversal Signal", description: "Double bottom formation on AUD/USD daily chart signals potential reversal. Entry near 0.6550 with target at 0.6700.", sentiment: "bullish", confidence: 68, timeframe: "2 weeks", }, { title: "USD/CAD Short Opportunity", description: "Overbought conditions and bearish divergence on USD/CAD suggest shorting opportunity with tight stop above 1.3650.", sentiment: "bearish", confidence: 71, timeframe: "1 week", }, ], } export default function AiInsightsSection() { return (

AI-Powered Market Insights

Leverage advanced artificial intelligence to identify trading opportunities and market trends

Market Trends Economic Impact Trading Opportunities
{Object.entries(insightsData).map(([key, insights]) => (
{insights.map((insight, i) => (
{insight.title} {insight.sentiment === "bullish" ? ( ) : insight.sentiment === "bearish" ? ( ) : null} {insight.sentiment}
{insight.description}

Confidence: {insight.confidence}%

Timeframe: {insight.timeframe}

))}

AI analysis updated every 4 hours based on market conditions

))}

) } [V0_FILE]typescriptreact:file="components/faq-section.tsx" "use client" import { Card, CardContent } from "@/components/ui/card" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" import { HelpCircle } from "lucide-react" const faqItems = [ { question: "What is a prop trading firm?", answer: "A proprietary trading firm (prop firm) provides traders with capital to trade financial markets. Unlike traditional trading where you use your own money, prop firms fund your trading activities in exchange for a share of the profits. This allows traders to access larger capital pools and potentially earn more without risking their own funds.", }, { question: "How do I qualify for funding?", answer: "To qualify for funding, you'll need to pass our evaluation process, which typically involves demonstrating consistent profitability while adhering to risk management rules. Our evaluation assesses your trading skills, discipline, and ability to follow the trading plan. Once you successfully complete the evaluation, you'll receive funding and can begin trading with our capital.", }, { question: "What markets can I trade?", answer: "Our platform supports trading in a wide range of markets, including Forex (currency pairs), Commodities (gold, oil, etc.), Indices (S&P 500, NASDAQ, etc.), and Cryptocurrencies. The specific markets available may vary depending on your chosen program and account type.", }, { question: "How much profit can I keep?", answer: "Profit splits typically range from 70% to 85%, depending on your program level and performance. Higher-tier programs and consistent performance can lead to improved profit-sharing terms. Your portion of the profits is paid out according to the schedule outlined in your trader agreement.", }, { question: "What are the trading rules?", answer: "Our trading rules are designed to ensure responsible risk management. These typically include maximum daily drawdown limits, maximum total drawdown limits, minimum trading days requirements, and restrictions on certain trading strategies like news trading or excessive leverage. The specific rules vary by program and are clearly outlined before you begin.", }, { question: "How often are profits paid out?", answer: "Profit payouts occur on a bi-weekly or monthly basis, depending on your program. To qualify for a payout, you must have generated profits above your high-water mark. Payments are typically processed within 3-5 business days and can be received via bank transfer, PayPal, or cryptocurrency.", }, { question: "Can I trade from any country?", answer: "Yes, our platform supports traders from most countries worldwide. However, due to regulatory restrictions, we may be unable to provide services to residents of certain jurisdictions. Please check our Terms of Service or contact our support team to confirm eligibility for your specific location.", }, { question: "What happens if I lose money?", answer: "If your trading results in losses that exceed the maximum drawdown limits specified in your program, your account may be suspended or terminated. However, you will not be personally liable for any losses beyond the account balance. In many cases, you can restart the evaluation process to try again for funding.", }, ] export default function FaqSection() { return (

Frequently Asked Questions

Everything you need to know about our prop trading programs

{faqItems.map((item, i) => ( {item.question} {item.answer} ))}

) } [V0_FILE]typescriptreact:file="components/cta-section.tsx" import { Button } from "@/components/ui/button" import { ArrowRight } from "lucide-react" export default function CtaSection() { return (
{/* Background elements /}

Ready to Trade with Professional Capital?

Join thousands of successful traders who have taken their trading career to the next level with our funded accounts.

{[ { label: "Instant Funding", value: "After Evaluation" }, { label: "High Profit Split", value: "Up to 85%" }, { label: "Fast Withdrawals", value: "Bi-weekly Payouts" }, { label: "24/7 Support", value: "Always Available" }, ].map((stat, i) => (

{stat.label}

{stat.value}

))}

) } [V0_FILE]typescriptreact:file="components/footer.tsx" import Link from "next/link" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Facebook, Twitter, Instagram, Linkedin, Youtube, Send } from "lucide-react" export default function Footer() { return (

ForexFundTrader

Empowering traders with professional capital and cutting-edge technology to succeed in the global markets.

Facebook Twitter Instagram LinkedIn YouTube

Quick Links

{[ { name: "Home", href: "/" }, { name: "About Us", href: "/about" }, { name: "Trading Programs", href: "/programs" }, { name: "Leaderboard", href: "/leaderboard" }, { name: "FAQ", href: "/faq" }, { name: "Contact", href: "/contact" }, ].map((link) => (
{link.name}
))}

Resources

{[ { name: "Trading Education", href: "/education" }, { name: "Market Analysis", href: "/analysis" }, { name: "Risk Management", href: "/risk-management" }, { name: "Trading Psychology", href: "/psychology" }, { name: "Webinars & Events", href: "/events" }, { name: "Blog", href: "/blog" }, ].map((link) => (
{link.name}
))}

Subscribe

Get the latest market insights and trading opportunities delivered to your inbox.

© {new Date().getFullYear()} ForexFundTrader. All rights reserved.

Terms of Service Privacy Policy Cookie Policy

) } [V0_FILE]typescriptreact:file="components/ui/chart.tsx" isQuickEdit="true" "\"use client" import as React from "react" import { Area, AreaChart as RechartsAreaChart, Bar, BarChart as RechartsBarChart, CartesianGrid, Cell, ComposedChart as RechartsComposedChart, Legend, Line as RechartsLine, LineChart as RechartsLineChart, Pie, PieChart as RechartsPieChart, RadialBar, RadialBarChart as RechartsRadialBarChart, Rectangle, ReferenceLine, ResponsiveContainer, Tooltip as RechartsTooltip, XAxis as RechartsXAxis, YAxis as RechartsYAxis, } from "recharts" import { cn } from "@/lib/utils" const chartConfig = { xAxis: { axisLine: { stroke: "hsl(var(--border))", }, tick: { fill: "hsl(var(--muted-foreground))", }, }, yAxis: { axisLine: { stroke: "hsl(var(--border))", }, tick: { fill: "hsl(var(--muted-foreground))", }, }, cartesianGrid: { stroke: "hsl(var(--border))", strokeDasharray: "3 3", strokeOpacity: 0.3, }, tooltip: { cursor: { fill: "hsl(var(--muted) / 0.2)", }, contentStyle: { background: "hsl(var(--card))", border: "1px solid hsl(var(--border))", borderRadius: "calc(var(--radius) - 2px)", boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)", }, }, legend: { formatter: (value: string) => {value}, }, } interface ChartConfig { width?: number height?: number margin?: { top?: number right?: number bottom?: number left?: number } className?: string children?: React.ReactNode } interface ChartContext { width?: number height?: number margin?: { top?: number right?: number bottom?: number left?: number } } const ChartContext = React.createContext({}) function ChartContainer({ width = 400, height = 400, margin = { top: 20, right: 20, bottom: 20, left: 20, }, className, children, }: ChartConfig) { return (
{children}
) } interface LineChartProps { data: any[] className?: string children?: React.ReactNode } function LineChart({ data, className, children }: LineChartProps) { const { width, height, margin } = React.useContext(ChartContext) return ( {children} ) } interface BarChartProps { data: any[] className?: string children?: React.ReactNode } function BarChart({ data, className, children }: BarChartProps) { const { width, height, margin } = React.useContext(ChartContext) return ( {children} ) } interface AreaChartProps { data: any[] className?: string children?: React.ReactNode } function AreaChart({ data, className, children }: AreaChartProps) { const { width, height, margin } = React.useContext(ChartContext) return ( {children} ) } interface PieChartProps { data: any[] className?: string children?: React.ReactNode } function PieChart({ data, className, children }: PieChartProps) { const { width, height, margin } = React.useContext(ChartContext) return ( {children} ) } interface RadialBarChartProps { data: any[] className?: string children?: React.ReactNode } function RadialBarChart({ data, className, children }: RadialBarChartProps) { const { width, height, margin } = React.useContext(ChartContext) return ( {children} ) } interface ComposedChartProps { data: any[] className?: string children?: React.ReactNode } function ComposedChart({ data, className, children }: ComposedChartProps) { const { width, height, margin } = React.useContext(ChartContext) return ( {children} ) } interface XAxisProps extends React.ComponentProps {} function XAxis({ className, ...props }: XAxisProps) { return ( ) } interface YAxisProps extends React.ComponentProps {} function YAxis({ className, ...props }: YAxisProps) { return ( ) } interface CartesianGridProps extends React.ComponentProps {} function Grid({ className, ...props }: CartesianGridProps) { return ( ) } interface TooltipProps extends React.ComponentProps {} function Tooltip({ className, cursor, content, ...props }: TooltipProps) { return ( ) } interface ChartTooltipProps extends React.HTMLAttributes { active?: boolean payload?: any[] label?: string } function ChartTooltip({ active, payload, label, className, children, ...props }: ChartTooltipProps) { if (active && payload?.length) { return (

{label &&
{label}
} {children}

{payload.map((item: any, index: number) => (

{item.name}

{item.value}

))}

) } return null } interface ChartTooltipContentProps extends React.HTMLAttributes {} function ChartTooltipContent({ className, ...props }: ChartTooltipContentProps) { return
} interface LegendProps extends React.ComponentProps {} function ChartLegend({ className, ...props }: LegendProps) { return ( ) } interface LineProps extends React.ComponentProps {} function Line({ className, ...props }: LineProps) { return } export { ChartContainer, LineChart, BarChart, AreaChart, PieChart, RadialBarChart, ComposedChart, XAxis, YAxis, Grid, Tooltip, ChartTooltip, ChartTooltipContent, ChartLegend, Line, Area, Bar, Pie, RadialBar, Cell, Rectangle, ReferenceLine, }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This